<!DOCTYPE html>
<html lang="en">
  <head>
    <title>接口文档演示</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/themes/prism-okaidia.min.css" />
    <style>
      blockquote {
        border-left: solid 4px #eee;
        padding-left: 8px;
        font-style: italic;
        margin-left: 0;
        padding: 8px;
      }

      .ui.micro.label {
        font-size: .25rem;
      }

      .ui.transaction.accordion .title {
        text-align: center;
      }

      .ui.transaction.accordion .content {
        border-top: solid 1px #ddd !important;
        border-bottom: solid 1px #ddd !important;
        background-color: rgba(0,0,0,.03);
        padding: 0.5em 1em !important;
      }

      .ui.transaction.accordion .content.active {
        margin-top: 0.5em;
      }

      .ui.basic.label {
        text-align: left;
        overflow: auto;
      }

      .resource .ui.sub.header {
        text-transform: none;
      }

      @media only screen and (min-width: 768px) {
        .sidewrap {
          margin-right: 2rem;
        }

        .sidenav {
          left: 0;
          top: 0;
          width: inherit;
          position: fixed !important;
          height: 100% !important;
          overflow-y: auto !important;
          padding-left: 0.5rem;
        }
      }
    </style>
  </head>
  <body>
    <div class="ui padded grid">
      <div class="sidewrap four wide computer five wide tablet sixteen wide mobile column">
        <div class="sidenav">
          
<div class="ui horizontal divider">
  <a href="#introduction">Introduction</a>
</div>
<div class="ui fluid secondary vertical menu">
  <a class="item" href="#introduction">接口文档演示</a>
</div>


<div class="ui horizontal divider">
  <a href="#%e6%8e%a5%e5%8f%a3%e6%bc%94%e7%a4%ba%e5%88%86%e7%bb%84">接口演示分组</a>
</div>

<div class="ui accordion fluid">
  
    
    <div class="title active">
      <i class="dropdown icon"></i>
      
        <strong>hello接口</strong>
      
    </div>
    <div class="content active">
      <div class="ui fluid secondary vertical menu">
      
        <a class="item green" href="#%e6%8e%a5%e5%8f%a3%e6%bc%94%e7%a4%ba%e5%88%86%e7%bb%84-hello%e6%8e%a5%e5%8f%a3-hello%e6%8e%a5%e5%8f%a3">
          <i class="ui green empty circular label"></i>
          
            <span>hello接口</span>
          
        </a>
      
      </div>
    </div>
    
  
    
    <div class="title ">
      <i class="dropdown icon"></i>
      
        <strong>test接口</strong>
      
    </div>
    <div class="content ">
      <div class="ui fluid secondary vertical menu">
      
        <a class="item green" href="#%e6%8e%a5%e5%8f%a3%e6%bc%94%e7%a4%ba%e5%88%86%e7%bb%84-test%e6%8e%a5%e5%8f%a3-test%e6%8e%a5%e5%8f%a3">
          <i class="ui green empty circular label"></i>
          
            <span>test接口</span>
          
        </a>
      
      </div>
    </div>
    
  
    
    <div class="title ">
      <i class="dropdown icon"></i>
      
        <strong>micro接口</strong>
      
    </div>
    <div class="content ">
      <div class="ui fluid secondary vertical menu">
      
        <a class="item green" href="#%e6%8e%a5%e5%8f%a3%e6%bc%94%e7%a4%ba%e5%88%86%e7%bb%84-micro%e6%8e%a5%e5%8f%a3-micro%e6%8e%a5%e5%8f%a3">
          <i class="ui green empty circular label"></i>
          
            <span>micro接口</span>
          
        </a>
      
      </div>
    </div>
    
  
</div>


        </div>
      </div>
      <div class="eleven wide computer ten wide tablet sixteen wide mobile column">
        
<div class="ui hidden divider header"></div>
<h1 class="ui huge header" id="introduction">接口文档演示</h1>
<hr class="ui divider">
<div class="description">
  <p>这里演示如何用markdown语法方便快捷的编写接口文档。</p>

<p>这是一个模板文件，演示了如何定义一个接口分组，接口名称，接口请求信息，接口响应信息，你可以完全按照这个模板文件去定义你的接口。</p>

<p><strong>语法说明</strong></p>

<ul>
<li><p>“# Group 组名称”: 声明的是一个分组</p></li>

<li><p>“## 接口名称”: 声明一个接口</p></li>

<li><p>“### 接口名称　[http method]”: restful风格,声明不同http method下的接口信息</p></li>

<li><p>“+ Parameters”: 声明请求参数</p></li>

<li><p>“+ Response 200 (application/json)”: 声明响应结果</p></li>
</ul>

<p><strong>接口文档生成说明</strong></p>

<ol>
<li><p>./snowboard html -i apis/demo.apib -o demo.html -s</p></li>

<li><p>open the website, <a href="http://localhost:8088/">http://localhost:8088/</a></p></li>
</ol>

<p><strong>接口mock使用说明</strong></p>

<ol>
<li><p>./snowboard mock -i ./apis/demo.apib</p></li>

<li><p>open the website, <a href="http://localhost:8087/demo/index/hello">http://localhost:8087/demo/index/hello</a></p></li>
</ol>

</div>

        <div class="ui hidden divider"></div>
        

  <div class="ui horizontal divider" id="接口演示分组">
    接口演示分组
  </div>
  <div class="ui header center aligned">
    <div class="ui sub header">
      <p>演示默认模块demo的默认控制器Index的三个接口hello,get,micro。</p>

    </div>
  </div>
  
    
      <div class="ui stacked segments">
        <div class="ui basic segment resource">
          <div class="ui purple huge ribbon label">
            hello接口
          </div>
          <div class="ui header">
            <div class="ui sub header">
              <p>这里定义接口的描述信息</p>

            </div>
          </div>
        </div>

        
          
<div class="ui grey horizontal small divider header">
  <i class="ui grey micro circular label"></i>
  <i class="ui pink micro circular label"></i>
  <i class="ui grey micro circular label"></i>
</div>

          <div class="ui basic segment">
            <h3 class="ui block center aligned header" id="接口演示分组-hello接口-hello接口">
              hello接口
            </h3>
            <div class="description"><p>描述信息</p>
</div>

            
              <h4 class="ui horizontal divider">
                REQUEST
              </h4>
              <div class="description"></div>
              <div class="fluid ui large labeled button">
                <div class="ui green large button">
                  <h3>GET</h3>
                </div>
                <a class="ui basic fluid green label">
                  <code>https://localhost:666/demo/index/hello</code>
                </a>
              </div>
              
              
              

              <h4 class="ui horizontal divider">RESPONSE</h4>
              <div class="description"></div>
              
<table class="ui celled definition table">
  <thead>
    <tr>
      <th colspan="2">Headers</th>
    </tr>
  </thead>
  <tbody>
  
    <tr>
      <td class="four wide">Content-Type</td>
      <td><code>application/json</code></td>
    </tr>
  
  </tbody>
</table>

              <div class="ui stacked blue segment">
                <div class="ui fluid transaction accordion">
                  <div class="title center aligned">
                    <a class="ui blue circular label">
                      200
                    </a>
                    <code>application/json</code>
                  </div>
                  <div class="content tabbed">
                    <div class="ui top attached tabular menu">
                      <a data-tab="body" class="active item">BODY</a>
                      <a data-tab="schema" class="item">SCHEMA</a>
                    </div>
                    <div class="ui bottom attached active tab segment" data-tab="body">
                      <pre style="white-space: inherit">
                        <code class="language-json">{
    &#34;code&#34;:200,
    &#34;message&#34;:&#34;OK&#34;,
    &#34;result&#34;:&#34;Hello Easy PHP&#34;
}
</code>
                      </pre>
                    </div>
                    <div class="ui bottom attached tab segment" data-tab="schema">
                      <pre style="white-space: inherit">
                        <code class="language-json"></code>
                      </pre>
                    </div>
                  </div>
                </div>
              </div>
            
          </div>
        
        </div>
      <div class="ui hidden divider"></div>
    
  
    
      <div class="ui stacked segments">
        <div class="ui basic segment resource">
          <div class="ui purple huge ribbon label">
            test接口
          </div>
          <div class="ui header">
            <div class="ui sub header">
              <p>这里定义接口的描述信息</p>

            </div>
          </div>
        </div>

        
          
<div class="ui grey horizontal small divider header">
  <i class="ui grey micro circular label"></i>
  <i class="ui pink micro circular label"></i>
  <i class="ui grey micro circular label"></i>
</div>

          <div class="ui basic segment">
            <h3 class="ui block center aligned header" id="接口演示分组-test接口-test接口">
              test接口
            </h3>
            <div class="description"><p>描述信息</p>
</div>

            
              <h4 class="ui horizontal divider">
                REQUEST
              </h4>
              <div class="description"></div>
              <div class="fluid ui large labeled button">
                <div class="ui green large button">
                  <h3>GET</h3>
                </div>
                <a class="ui basic fluid green label">
                  <code>https://localhost:666/demo/index/test</code>
                </a>
              </div>
              
                
<table class="ui celled definition table">
  <thead>
    <tr>
      <th colspan="4">Parameters</th>
    </tr>
  <thead>
  <tbody>
  
    <tr>
      <td class="center aligned one wide">
        <i class="ui empty circular label black" data-content="required" data-position="top center"></i>
      </td>
      <td><code>username</code></td>
      <td class="center aligned">
        <code>string</code>
        <code class="ui label">test</code>
      </td>
      <td class="eight wide"><p>用户名</p>
</td>
    </tr>
  
    <tr>
      <td class="center aligned one wide">
        <i class="ui empty circular label black" data-content="required" data-position="top center"></i>
      </td>
      <td><code>password</code></td>
      <td class="center aligned">
        <code>string</code>
        <code class="ui label">test</code>
      </td>
      <td class="eight wide"><p>密码</p>
</td>
    </tr>
  
  </tbody>
</table>

              
              
              

              <h4 class="ui horizontal divider">RESPONSE</h4>
              <div class="description"></div>
              
<table class="ui celled definition table">
  <thead>
    <tr>
      <th colspan="2">Headers</th>
    </tr>
  </thead>
  <tbody>
  
    <tr>
      <td class="four wide">Content-Type</td>
      <td><code>application/json</code></td>
    </tr>
  
  </tbody>
</table>

              <div class="ui stacked blue segment">
                <div class="ui fluid transaction accordion">
                  <div class="title center aligned">
                    <a class="ui blue circular label">
                      200
                    </a>
                    <code>application/json</code>
                  </div>
                  <div class="content tabbed">
                    <div class="ui top attached tabular menu">
                      <a data-tab="body" class="active item">BODY</a>
                      <a data-tab="schema" class="item">SCHEMA</a>
                    </div>
                    <div class="ui bottom attached active tab segment" data-tab="body">
                      <pre style="white-space: inherit">
                        <code class="language-json">{
    &#34;code&#34;:200,
    &#34;message&#34;:&#34;OK&#34;,
    &#34;result&#34;:{
        &#34;username&#34;:&#34;default value&#34;
    }
}
</code>
                      </pre>
                    </div>
                    <div class="ui bottom attached tab segment" data-tab="schema">
                      <pre style="white-space: inherit">
                        <code class="language-json"></code>
                      </pre>
                    </div>
                  </div>
                </div>
              </div>
            
          </div>
        
        </div>
      <div class="ui hidden divider"></div>
    
  
    
      <div class="ui stacked segments">
        <div class="ui basic segment resource">
          <div class="ui purple huge ribbon label">
            micro接口
          </div>
          <div class="ui header">
            <div class="ui sub header">
              <p>这里定义接口的描述信息</p>

            </div>
          </div>
        </div>

        
          
<div class="ui grey horizontal small divider header">
  <i class="ui grey micro circular label"></i>
  <i class="ui pink micro circular label"></i>
  <i class="ui grey micro circular label"></i>
</div>

          <div class="ui basic segment">
            <h3 class="ui block center aligned header" id="接口演示分组-micro接口-micro接口">
              micro接口
            </h3>
            <div class="description"><p>描述信息</p>
</div>

            
              <h4 class="ui horizontal divider">
                REQUEST
              </h4>
              <div class="description"></div>
              <div class="fluid ui large labeled button">
                <div class="ui green large button">
                  <h3>GET</h3>
                </div>
                <a class="ui basic fluid green label">
                  <code>https://localhost:666/demo/index/micro</code>
                </a>
              </div>
              
              
              

              <h4 class="ui horizontal divider">RESPONSE</h4>
              <div class="description"></div>
              
<table class="ui celled definition table">
  <thead>
    <tr>
      <th colspan="2">Headers</th>
    </tr>
  </thead>
  <tbody>
  
    <tr>
      <td class="four wide">Content-Type</td>
      <td><code>application/json</code></td>
    </tr>
  
  </tbody>
</table>

              <div class="ui stacked blue segment">
                <div class="ui fluid transaction accordion">
                  <div class="title center aligned">
                    <a class="ui blue circular label">
                      200
                    </a>
                    <code>application/json</code>
                  </div>
                  <div class="content tabbed">
                    <div class="ui top attached tabular menu">
                      <a data-tab="body" class="active item">BODY</a>
                      <a data-tab="schema" class="item">SCHEMA</a>
                    </div>
                    <div class="ui bottom attached active tab segment" data-tab="body">
                      <pre style="white-space: inherit">
                        <code class="language-json">{
    &#34;code&#34;:200,
    &#34;message&#34;:&#34;OK&#34;,
    &#34;result&#34;:&#34;Hello Easy PHP&#34;
}
</code>
                      </pre>
                    </div>
                    <div class="ui bottom attached tab segment" data-tab="schema">
                      <pre style="white-space: inherit">
                        <code class="language-json"></code>
                      </pre>
                    </div>
                  </div>
                </div>
              </div>
            
          </div>
        
        </div>
      <div class="ui hidden divider"></div>
    
  


      </div>
    </div>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/components/accordion.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/components/tab.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/components/transition.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/components/popup.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/prism.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/components/prism-json.min.js"></script>
    <script type="text/javascript">
      $(function() {
        $('.ui.accordion').accordion({ animateChildren: false, duration: 0 });
        $('.content.tabbed').each(function(index) {
          $('.ui.tabular .item', $(this)).tab({ context: $(this) });
        });
        $('.ui.vertical.menu').on('click', '.item', function() {
          $('.ui.vertical.menu .item').removeClass('active');
          $(this).addClass('active');
        });
        $('.ui.empty.circular.label').popup();
      });
    </script>
  </body>
</html>












